<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>首页</title>


  <link
          rel="stylesheet"
          href="/uidata/css/bootstrap.min.css"
  />

  <link rel="stylesheet" href="/uidata/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/uidata/slick/slick.css" />
  <link rel="stylesheet" href="/uidata/slick/slick-theme.css" />
  <link rel="stylesheet" href="/uidata/css/magnific-popup.css" />
  <link rel="stylesheet" href="/uidata/css/tooplate-style.css" />

</head>

<body>
<!-- Loader -->
<div id="loader-wrapper">
  <div id="loader"></div>
  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>
</div>

<div class="tm-main-container">
  <div class="tm-top-container">
    <!-- Menu -->
    <nav id="tmNav" class="tm-nav">
      <a class="tm-navbar-menu" href="#">菜单</a>
      <ul class="tm-nav-links">
        <li class="tm-nav-item active">
          <a href="#" data-linkid="0" data-align="right" class="tm-nav-link">回到首页</a>
        </li>
        <li class="tm-nav-item">
          <a href="#" data-linkid="1" data-align="right" class="tm-nav-link">关于我们</a>
        </li>
        <li class="tm-nav-item">
          <a
                  href="#"
                  data-linkid="2"
                  data-align="middle"
                  class="tm-nav-link">作品展示及下载</a>
        </li>

        <li class="tm-nav-item">
          <a rel="nofollow" href="http://127.0.0.1:8086/news" class="tm-nav-link external">新闻展示及管理</a>
        </li>
        <li class="tm-nav-item">
          <a
                  rel="nofollow" href="https://fb.com/tooplate"
                  class="tm-nav-link external">用户留言</a>
        </li>
      </ul>
    </nav>

    <header class="tm-site-header-box tm-bg-dark">
      <h1 class="tm-site-title">丽江存爱摄影公司</h1>
      <p class="mb-0 tm-site-subtitle">阳光常在，摄影存爱</p>
    </header>
  </div>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <!-- Site content -->
        <div class="tm-content">

          <section class="tm-section tm-section-0">
            <h2 class="tm-section-title mb-3 font-weight-bold">
              公司简介
            </h2>
            <div class="tm-textbox tm-bg-dark">
              <p>
                存爱公司是一家致力于捕捉生活中珍贵瞬间的专业摄影机构。我们相信每一个瞬间都值得被珍藏，每一张照片都承载着独特的情感和回忆。
              </p>
              <p class="mb-0">
                作为您生活中的见证者，我们将尽心尽力地为您提供优质的摄影服务。我们的团队由经验丰富、热情洋溢的摄影师组成，他们具备专业的摄影技能和敏锐的观察力，能够捕捉到每一个细微的表情和情感。
              </p>
            </div>
            <a href="#" id="tm_about_link" data-linkid="1" class="tm-link">Read More</a>
          </section>

          <!-- Section 1 About Me -->
          <section class="tm-section tm-section-1">
            <div class="tm-textbox tm-textbox-2 tm-bg-dark">
              <h2 class="tm-text-blue mb-4">我们的态度</h2>
              <p class="mb-4">
                不论是婚礼摄影、家庭摄影、商业摄影还是活动摄影，我们都将以专业的态度和精湛的技艺，为您创造出令人难忘的影像作品。
                在存爱摄影，我们注重与客户之间的沟通和理解，以确保我们能够真正地理解您的需求和期望，并将其转化为精美的摄影作品。我们致力于为每一位客户提供个性化的服务，让您的每一个愿望都能得到满足。
              </p>
              <p class="mb-4">
                无论是记录幸福的时刻，还是追求美好的回忆，存爱摄影将陪伴您一路前行，为您的生活增添更多的色彩和温暖。让我们一起留下珍贵的记忆，永远怀抱爱与美好！
              </p>
              <a
                      href="#"
                      id="tm_work_link"
                      data-linkid="2"
                      class="tm-link m-0"
              >下一页</a
              >
            </div>
          </section>

          <!-- Section 2 Work (Gallery) -->
          <section class="tm-section tm-section-2 mx-auto">
            <div class="grid tm-gallery">
              <figure class="effect-goliath tm-gallery-item">
                <img src="/uidata/img/01.jpg" alt="Image 1" class="" />
                <figcaption>
                  <h2>
                    Thoughtful
                    <span>Goliath</span>
                  </h2>
                  <p>When Goliath comes out, you should run.</p>
                  <a href="/uidata/img/01.jpg">View more</a>
                </figcaption>
              </figure>
              <figure class="effect-goliath tm-gallery-item">
                <img src="/uidata/img/02.jpg" alt="Pretty Girl" class="" />
                <figcaption>
                  <h2>
                    Pretty Girl
                    <span>Picture</span>
                  </h2>
                  <p>Vivamus feugiat, neque sed.</p>
                  <a href="/uidata/img/02.jpg">View more</a>
                </figcaption>
              </figure>
              <figure class="effect-goliath tm-gallery-item">
                <img src="/uidata/img/03.jpg" alt="Red Flowers" class="" />
                <figcaption>
                  <h2>
                    A bunch of
                    <span>Red Flower</span>
                  </h2>
                  <p>Integer pellentesque nisi iaculis sapien.</p>
                  <a href="/uidata/img/03.jpg">View more</a>
                </figcaption>
              </figure>
              <figure class="effect-goliath tm-gallery-item">
                <img src="/uidata/img/04.jpg" alt="Stairs" class="" />
                <figcaption>
                  <h2>
                    Thoughtful
                    <span>Goliath</span>
                  </h2>
                  <p>When Goliath comes out, you should run.</p>
                  <a href="/uidata/img/04.jpg">View more</a>
                </figcaption>
              </figure>
              <figure class="effect-goliath tm-gallery-item">
                <img src="/uidata/img/05.jpg" alt="Image 5" class="" />
                <figcaption>
                  <h2>
                    Thoughtful
                    <span>Goliath</span>
                  </h2>
                  <p>When Goliath comes out, you should run.</p>
                  <a href="/uidata/img/05.jpg">View more</a>
                </figcaption>
              </figure>
              <figure class="effect-goliath tm-gallery-item">
                <img src="/uidata/img/06.jpg" alt="Image 6" class="" />
                <figcaption>
                  <h2>
                    Thoughtful
                    <span>Goliath</span>
                  </h2>
                  <p>When Goliath comes out, you should run.</p>
                  <a href="/uidata/img/06.jpg">View more</a>
                </figcaption>
              </figure>
              <figure class="effect-goliath tm-gallery-item">
                <img src="/uidata/img/07.jpg" alt="Image 7" class="" />
                <figcaption>
                  <h2>
                    Thoughtful
                    <span>Goliath</span>
                  </h2>
                  <p>When Goliath comes out, you should run.</p>
                  <a href="/uidata/img/07.jpg">View more</a>
                </figcaption>
              </figure>
              <figure class="effect-goliath tm-gallery-item">
                <img src="/uidata/img/08.jpg" alt="Image 8" class="" />
                <figcaption>
                  <h2>
                    Thoughtful
                    <span>Goliath</span>
                  </h2>
                  <p>When Goliath comes out, you should run.</p>
                  <a href="/uidata/img/08.jpg">View more</a>
                </figcaption>
              </figure>
              <figure class="effect-goliath tm-gallery-item">
                <img src="/uidata/img/09.jpg" alt="Image 9" class="" />
                <figcaption>
                  <h2>
                    Thoughtful
                    <span>Goliath</span>
                  </h2>
                  <p>When Goliath comes out, you should run.</p>
                  <a href="/uidata/img/09.jpg">View more</a>
                </figcaption>
              </figure>
              <figure class="effect-goliath tm-gallery-item">
                <img src="/uidata/img/10.jpg" alt="Image 10" class="" />
                <figcaption>
                  <h2>
                    Thoughtful
                    <span>Goliath</span>
                  </h2>
                  <p>When Goliath comes out, you should run.</p>
                  <a href="/uidata/img/10.jpg">View more</a>
                </figcaption>
              </figure>
              <figure class="effect-goliath tm-gallery-item">
                <img src="/uidata/img/11.jpg" alt="Image 11" class="" />
                <figcaption>
                  <h2>
                    Thoughtful
                    <span>Goliath</span>
                  </h2>
                  <p>When Goliath comes out, you should run.</p>
                  <a href="/uidata/img/11.jpg">View more</a>
                </figcaption>
              </figure>
              <figure class="effect-goliath tm-gallery-item">
                <img src="/uidata/img/12.jpg" alt="Image 12" class="" />
                <figcaption>
                  <h2>
                    Thoughtful
                    <span>Goliath</span>
                  </h2>
                  <p>When Goliath comes out, you should run.</p>
                  <a href="/uidata/img/12.jpg">View more</a>
                </figcaption>
              </figure>
            </div>
          </section>

          <!-- Section 3 Contact -->

        </div>
      </div>
    </div>
  </div>

  <div class="tm-bottom-container">
    <!-- Barcode -->
    <div class="tm-barcode-box">
      <img src="/uidata/img/bar-code.jpg" alt="Bar code" />
    </div>

    <!-- Footer -->
    <footer>
      || 灰灰一组 &copy; 2024 丽江存爱摄影公司 ||

      玉泉路 <a rel="nofollow" href="https://fb.com/tooplate">1号</a> ||

    </footer>
  </div>
</div>

<script src="/uidata/js/jquery-1.11.0.min.js"></script>
<script src="/uidata/js/background.cycle.js"></script>
<script src="/uidata/slick/slick.min.js"></script>
<script src="/uidata/js/jquery.magnific-popup.min.js"></script>
<script>
  let slickInitDone = false;
  let previousImageId = 0,
          currentImageId = 0;
  let pageAlign = "right";
  let bgCycle;
  let links;
  let eachNavLink;

  window.onload = function() {
    $("body").addClass("loaded");
  };

  function navLinkClick(e) {
    if ($(e.target).hasClass("external")) {
      return;
    }

    e.preventDefault();

    if ($(e.target).data("align")) {
      pageAlign = $(e.target).data("align");
    }

    // Change bg image
    previousImageId = currentImageId;
    currentImageId = $(e.target).data("linkid");
    bgCycle.cycleToNextImage(previousImageId, currentImageId);

    // Change menu item highlight
    $(`.tm-nav-item:eq(${previousImageId})`).removeClass("active");
    $(`.tm-nav-item:eq(${currentImageId})`).addClass("active");

    // Change page content
    $(`.tm-section-${previousImageId}`).fadeOut(function(e) {
      $(`.tm-section-${currentImageId}`).fadeIn();
      // Gallery
      if (currentImageId === 2) {
        setupSlider();
      }
    });

    adjustFooter();
  }

  $(document).ready(function() {
    // Set first page
    $(".tm-section").fadeOut(0);
    $(".tm-section-0").fadeIn();


    bgCycle = $("body").backgroundCycle({
      imageUrls: [
        "/uidata/img/photo-02.jpg",
        "/uidata/img/photo-03.jpg",
        "/uidata/img/photo-04.jpg",
        "/uidata/img/photo-05.jpg"
      ],
      fadeSpeed: 2000,
      duration: -1,
      backgroundSize: SCALING_MODE_COVER
    });

    eachNavLink = $(".tm-nav-link");
    links = $(".tm-nav-links");

    // "Menu" open/close
    if (links.hasClass("open")) {
      links.fadeIn(0);
    } else {
      links.fadeOut(0);
    }

    $("#tm_about_link").on("click", navLinkClick);
    $("#tm_work_link").on("click", navLinkClick);


    eachNavLink.on("click", navLinkClick);

    $(".tm-navbar-menu").click(function(e) {
      if (links.hasClass("open")) {
        links.fadeOut();
      } else {
        links.fadeIn();
      }

      links.toggleClass("open");
    });


    $(window).resize(function() {

      if (currentImageId === 2) {
        setupSlider();
      }

      adjustFooter();
    });

    adjustFooter();
  });

  function adjustFooter() {
    const windowHeight = $(window).height();
    const topHeight = $(".tm-top-container").height();
    const middleHeight = $(".tm-content").height();
    let contentHeight = topHeight + middleHeight;

    if (pageAlign === "left") {
      contentHeight += $(".tm-bottom-container").height();
    }

    if (contentHeight > windowHeight) {
      $(".tm-bottom-container").addClass("tm-static");
    } else {
      $(".tm-bottom-container").removeClass("tm-static");
    }
  }

  function setupSlider() {
    let slidesToShow = 4;
    let slidesToScroll = 2;
    let windowWidth = $(window).width();

    if (windowWidth < 480) {
      slidesToShow = 1;
      slidesToScroll = 1;
    } else if (windowWidth < 768) {
      slidesToShow = 2;
      slidesToScroll = 1;
    } else if (windowWidth < 992) {
      slidesToShow = 3;
      slidesToScroll = 2;
    }

    if (slickInitDone) {
      $(".tm-gallery").slick("unslick");
    }

    slickInitDone = true;

    $(".tm-gallery").slick({
      dots: true,
      customPaging: function(slider, i) {
        var thumb = $(slider.$slides[i]).data();
        return `<a>${i + 1}</a>`;
      },
      infinite: true,
      prevArrow: false,
      nextArrow: false,
      slidesToShow: slidesToShow,
      slidesToScroll: slidesToScroll
    });
    $(".slick-list").magnificPopup({
      delegate: "a",
      type: "image",
      gallery: {
        enabled: true
      }
    });
  }
</script>
</body>
</html>
